<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="alternate icon" type="image/png" href="../img/favicon.png">
  <link rel="stylesheet" href="../css/amazeui.min.css">
  <link rel="stylesheet" href="../css/wap.css">
  <title>首页 - 迷你日志</title>
</head>
<body style="background:#ececec">
  <div class="pet_mian" id="app" >
    <div class="pet_head">
      <header data-am-widget="header"
          class="am-header am-header-default pet_head_block">
        <div class="am-header-left am-header-nav ">
          <!-- <a href="#left-link" class="iconfont pet_head_jt_ico">&#xe601;</a> -->
        </div>
<div class="pet_news_list_tag_name">迷你日志</div>
        <div class="am-header-right am-header-nav">
          <a href="javascript:;" class="iconfont pet_head_gd_ico">&#xe600;</a>
        </div>
      </header>
    </div>

    <div class="pet_more_list">
      <div class="pet_more_list_block">
        <div class="iconfont pet_more_close">×</div>
        <div class="pet_more_list_block">
          <div class="pet_more_list_block_name">
            <div class="pet_more_list_block_name_title">迷你日志</div>
            <a class="pet_more_list_block_line" href="/mininote/"> <i class="iconfont pet_nav_zhangzhishi pet_more_list_block_line_ico">&#xe607;</i>
              <div class="pet_more_list_block_line_font">首页</div>
            </a>
            <a class="pet_more_list_block_line" href="/mininote/new.html" > <i class="iconfont pet_nav_xinxianshi pet_more_list_block_line_ico">&#xe61e;</i>
              <div class="pet_more_list_block_line_font">新增</div>
            </a>
            <a class="pet_more_list_block_line" href="/mininote/login.html" >
              <i class="iconfont pet_nav_kantuya pet_more_list_block_line_ico">&#xe62c;</i>
              <div class="pet_more_list_block_line_font">退出</div>
            </a>
            <div class="pet_more_list_block_name_title pet_more_list_block_line_height">小白接口 OkayApi</div>
            <a class="pet_more_list_block_line" href="http://www.okayapi.com/?f=mininote" target="_blank" >
              <i class="iconfont pet_nav_mengzhuanti pet_more_list_block_line_ico">&#xe61e;</i>
              <div class="pet_more_list_block_line_font">官网</div>
            </a>
            <a class="pet_more_list_block_line" href="http://www.okayapi.com/docs/#/v2.0/README" target="_blank"  >
              <i class="iconfont pet_nav_bk pet_more_list_block_line_ico">&#xe607;</i>
              <div class="pet_more_list_block_line_font">文档</div>
            </a>
            <a class="pet_more_list_block_line" href="http://admin.okayapi.com/?r=Site/Index" target="_blank" >
              <i class="iconfont pet_nav_wd pet_more_list_block_line_ico">&#xe62c;</i>
              <div class="pet_more_list_block_line_font">后台</div>
            </a>
          </div>
        </div>

      </div>
    </div>

    <div class="pet_content pet_content_list">
      <div class="pet_grzx">

          <div class="pet_grzx_nr">
              <div class="pet_grzx_ico">
                  <img src="../img/logo.png" alt="">
              </div>
              <div class="pet_grzx_name">{{ username }}</div>
              <div class="pet_grzx_map">{{ user_city }}</div>
              <div class="pet_grzx_num_font">
                  此H5应用是小白接口的开发示例，源代码下载请前往码云<a href="https://gitee.com/dogstar/okayapi-demo">okayapi-demo</a>。数据存在<a href="http://admin.okayapi.com/">小白后台</a>。
              </div>
              <div class="pet_grzx_num">
                  <span>{{ note_total }}<i>日志</i></span>
                <span>0<i>收藏</i></span>
                <span>896<i>访问</i></span>
              </div>

          </div>

          <div class="pet_grzx_list" id="app_list">
             <div class="pet_content_main pet_article_like_delete">
          <div data-am-widget="list_news" class="am-list-news am-list-news-default am-no-layout">
            <div class="am-list-news-bd">
              <ul class="am-list">
                <!--缩略图在标题右边-->
                 <li v-for="(note_item, note_index) in note_list" class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block">

        <div class=" am-u-sm-8 am-list-main pet_list_one_nr" style="height: 88x;">
            <h3 class="am-list-item-hd pet_list_one_bt"><a :href="'/mininote/view.html?id=' + note_item.id" class="">{{ note_item.data.note_title }}</a></h3>
            <div class="am-list-item-text pet_list_one_text">{{ note_item.data.note_content }}</div>

        </div>
          <div class="am-u-sm-4 am-list-thumb">
              <a :href="'/mininote/view.html?id=' + note_item.id" class="">
              <img :src="'../img/p' + (note_index % 3) + '.jpg'" class="pet_list_one_img" alt=""/>
            </a>
          </div>
      </li>


                </ul>
              </div>

            </div>

          </div>

        <ul class="like_share_block">
        <li><a v-on:click="moreNote" class="link_share_button" href="javascript:void(0)"><i class="am-icon-circle-o-notch"></i>加载更多</a></li>
        <li><a class="link_share_button" href="/mininote/new.html"><i class="am-icon-edit"></i>写日志</a></li>
        <li><a v-on:click="promptProfile" class="link_share_button" href="javascript:void(0)"><i class="am-icon-user"></i>个人资料</a></li>
      </ul>

      <div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
          <div class="am-modal-dialog">
              <div class="am-modal-hd">个人资料</div>
              <div class="am-modal-bd">
                  您当前所在的城市是？
                  <input type="text" class="am-modal-prompt-input">
              </div>
              <div class="am-modal-footer">
                  <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                  <span class="am-modal-btn" data-am-modal-confirm>提交</span>
              </div>
          </div>
      </div>

          </div>
<div class="pet_article_dowload">
      <div class="pet_article_dowload_title">小白接口开发示例</div>
      <div class="pet_article_dowload_content"><div class="pet_article_dowload_triangle"></div>
      <div class="pet_article_dowload_ico"><img src="../img/logo_min.png" alt=""></div>
      <div class="pet_article_dowload_content_font">
小白接口，是免费，免开发，直接可用的云端数据接口！我们致力于让每个开发者都能轻松使用云端接口。
      </div>
      </div>
  </div>
        </div>

        <div class="pet_article_footer_info">Copyright © 2018 OkayApi All Rights Reserved</div>
      </div>
    </div>
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/amazeui.min.js"></script>

    <script>
function adjustSize() {

    // 动态计算新闻列表文字样式
    auto_resize();
    $(window).resize(function() {
        auto_resize();
    });
    /**
    $('.am-list-thumb img').load(function(){
        auto_resize();
    });
    $('.pet_article_like li:last-child').css('border','none');
        **/
        function auto_resize(){
        $('.pet_list_one_nr').height($('.pet_list_one_img').height());
                // alert($('.pet_list_one_nr').height());
    }
        $('.pet_article_user').on('click',function(){
            if($('.pet_article_user_info_tab').hasClass('pet_article_user_info_tab_show')){
                $('.pet_article_user_info_tab').removeClass('pet_article_user_info_tab_show').addClass('pet_article_user_info_tab_cloes');
            }else{
                $('.pet_article_user_info_tab').removeClass('pet_article_user_info_tab_cloes').addClass('pet_article_user_info_tab_show');
            }
        });

        $('.pet_head_gd_ico').on('click',function(){
            $('.pet_more_list').addClass('pet_more_list_show');
       });
        $('.pet_more_close').on('click',function(){
            $('.pet_more_list').removeClass('pet_more_list_show');
        });
}

$(adjustSize());
</script>



    <script type="text/javascript">
    // love yoyo forever

    var app = new Vue({
        el: '#app',
        data: {
            note_total: 0,
            username: $.AMUI.utils.cookie.get('mn_username'),
            user_city: $.AMUI.utils.cookie.get('mn_city'),
            page: 1,
            perpage: 1,
            note_list: []
        },

        methods: {
            init: function() {
                var _self = this

                if(_self.username == null) {
                    _self.username = '小白接口'
                }
                if (_self.user_city == null) {
                    _self.user_city = '中国'
                }

                this.moreNote(null)
            },
            moreNote: function (event) {
                var _self = this
                var params = { s: 'App.User_Set.GetList', key: 'mini_note', page: this.page, perpage: this.perpage }

                var uuid = $.AMUI.utils.cookie.get('mn_uuid')
                var token = $.AMUI.utils.cookie.get('mn_token')
                if (uuid) {
                    params['uuid'] = uuid
                }
                if (token) {
                    params['token'] = token
                }

                $.ajax({
                  url: '/okayapi.php',
                  dataType: 'json',
                  data: params
                }).done(function (rs) {
                    if (rs.data && rs.data.err_code == 0) {
                        //console.log(rs)

                        // 第一次赋值，后面则追加
                        if (_self.note_list .length == 0) {
                            _self.note_list = rs.data.items
                        } else {
                            $.each(rs.data.items, function(index, value) {
                                _self.note_list.push(value)
                            });
                        }

                        _self.page = rs.data.page + 1
                        _self.note_total = rs.data.total

                        adjustSize()
                    } else if (rs.ret > 200) {
                        // 未登录
                        _self.tips = rs.msg

                        alert('亲，请先登录~');

                        window.location.href = "/mininote/login.html"
                    } else {
                        _self.tips = rs.data.err_msg        
                    }
                });
            },
            promptProfile: function (event) {
              $('#my-prompt').modal({
                relatedTarget: this,
                  onConfirm: function(e) {
                    $.cookie('mn_city', e.data, { expires: 86400, path: '/', domain: 'demo.okayapi.com'});
                  },
                  onCancel: function(e) {
                    //alert('不想说!');
                  }
               });
            }
        }
    })

    app.init();
    </script>

</body>
  </html>
